<template>
  <div class="zhuan-banner">
    <div class="one">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.yupoo.com%2Fhuateng888%2FFwnVOGsg%2Fbig.jpg&refer=http%3A%2F%2Fphoto.yupoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657424562&t=1d10db3edcaa7aa2672113d3dc32d01f" alt="">
    </div>
    <div class="two">
      <img src="../../../assets/detail-img/07.gif" alt="" />
    </div>
    <div class="three">
      <ul v-for="s in shoes" :key="s.id">
        <li>
          <img v-bind:src="s.img" style="width: 47px; height: 43px" />
        </li>
        <p>{{ s.msg }}</p>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  name: "ZhuanBanner",
  data() {
    return {
      shoes: [
        {
          id: "001",
          img: require("../../../assets/detail-img/10.gif"),
          msg: "新品来袭",
        },
        {
          id: "002",
          img:  require("../../../assets/detail-img/12.gif"),
          msg: "人气热卖",
        },
        {
          id: "003",
          img:  require("../../../assets/detail-img/14.gif"),
          msg: "实战球鞋",
        },
        {
          id: "004",
          img:  require("../../../assets/detail-img/16.gif"),
          msg: "新品来袭",
        },
        {
          id: "005",
          img:  require("../../../assets/detail-img/18.gif"),
          msg: "新品来袭",
        },
      ],
    };
  },
};
</script>

<style scoped>
.zhuan-banner {
  height: 2.7rem;
  border-bottom: 0.07rem solid #f3f2f6;
  position: relative;
}
.one {
  position: absolute;
  top: -0.1rem;
  width: 3.56rem;
  height: 1rem;
  margin-left: 0.1rem;
}
.one img{
  width: 100%;
  height: 100%;
}
.two {
  margin-top: 0.15rem;
  margin-left: 0.32rem;
  position: absolute;
  top: 0.8rem;
  width: 3.39rem;
  height: 0.93rem;
}
.three {
  position: absolute;
  top: 2rem;
  display: flex;
    margin-left: 0.19rem;
}
.three ul{
    margin-left: 0.1rem;
    font-size: .14rem;
}
</style>